import G6 from '@antv/g6';
String.prototype.colorHex = function () {
  var that = this;
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  if (/^(rgb|RGB)/.test(that)) {
    var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',');
    var strHex = '#';
    for (var i = 0; i < aColor.length; i++) {
      var hex = Number(aColor[i]).toString(16);
      if (hex === '0') {
        hex += hex;
      }
      strHex += hex;
    }
    if (strHex.length !== 7) {
      strHex = that;
    }
    return strHex;
  } else if (reg.test(that)) {
    var aNum = that.replace(/#/, '').split('');
    if (aNum.length === 6) {
      return that;
    } else if (aNum.length === 3) {
      var numHex = '#';
      for (var i = 0; i < aNum.length; i += 1) {
        numHex += aNum[i] + aNum[i];
      }
      return numHex;
    }
  }
  return that;
};
String.prototype.colorRgb = function () {
  var sColor = this.toLowerCase();
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      var sColorNew = '#';
      for (var i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
      }
      sColor = sColorNew;
    }
    var sColorChange = [];
    for (var i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
    }
    return sColorChange.join(',');
  }
  return sColor;
};
G6.registerNode('rectRircle', {
  draw(cfg, group) {
    const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle } = cfg;
    const keyShape = group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: 200,
        height: 30,
        stroke: '#40a9ff',
        radius: [15, 15],
        ...style,
        cursor: 'pointer',
        lineWidth: 2,
      },
      name: 'rect-shape',
      draggable: true,
    });
    const labelX = keyShape.attrs.width / 2;
    const labelY = keyShape.attrs.height / 2 + labelStyle.style.fontSize / 2;

    group.addShape('text', {
      attrs: {
        x: labelX,
        y: labelY,
        textAlign: 'center',
        text: cfg.label,
        cursor: 'pointer',
        lineWidth: 2,
        fontWeight: 800,
        ...labelStyle.style,
      },
      // must be assigned in G6 3.3 and later versions. it can be any value you want
      name: 'text-shape1',
      draggable: true,
    });
    return keyShape;
  },
  setState(name, value, node) {
    let color = node._cfg.model.backgroundConfig.stroke;
    // console.log('iconfont state name = ', node._cfg)

    const group = node.getContainer();
    const shape = group.get('children')[0]; // 顺序根据 draw 时确定
    const textShape = group.get('children')[1];

    if (name === 'highlight') {
      if (value) {
        shape.attr('lineWidth', 2);
        textShape.attr('fontWeight', 800);
        shape.attr('opacity', 1);
        textShape.attr('opacity', 1);
      } else {
        shape.attr('lineWidth', 1);
        textShape.attr('fontWeight', 'normal');
        shape.attr('opacity', 0.1);
        textShape.attr('opacity', 0.1);
      }
    }
    if (name === 'dark') {
      if (value) {
        shape.attr('lineWidth', 1);
        textShape.attr('fontWeight', 'normal');
        shape.attr('opacity', 0.1);
        textShape.attr('opacity', 0.1);
      } else {
        shape.attr('lineWidth', 2);
        textShape.attr('fontWeight', 800);
        shape.attr('opacity', 1);
        textShape.attr('opacity', 1);
      }
    }
    if (name === '_selected') {
      if (value) {
        shape.attr('shadowColor', `rgba(${color.colorRgb()},.6)`);
        shape.attr('shadowBlur', 20);
        shape.attr('fill', '#ccc');
      } else {
        shape.attr('shadowColor', '');
        shape.attr('shadowBlur', 0);
        shape.attr('fill', '#fff');
      }
    }
  },
});

G6.registerNode('iconfont', {
  draw(cfg, group) {
    //   console.log('cfg=',cfg)
    const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle, iconfontColor } = cfg;

    if (backgroundStyle) {
      group.addShape('circle', {
        attrs: {
          x: 0,
          y: 0,
          r: cfg.size,
          ...backgroundStyle,
          lineWidth: 2,
          fontWeight: 800,
          cursor: 'pointer',
          ...style,
        },
        // must be assigned in G6 3.3 and later versions. it can be any value you want
        name: 'circle-shape',
        draggable: true,
      });
    }

    const keyShape = group.addShape('text', {
      attrs: {
        x: 0,
        y: 0,
        fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
        textAlign: 'center',
        textBaseline: 'middle',
        text: cfg.text,
        fontSize: cfg.size,
        lineWidth: 1,
        // fontWeight: 200,
        cursor: 'pointer',
        stroke: iconfontColor,
      },
      // must be assigned in G6 3.3 and later versions. it can be any value you want
      name: 'text-shape1',
      draggable: true,
    });

    // const labelY = backgroundStyle ? cfg.size * 1.8 : cfg.size;
    const labelY = cfg.size + 20;
    group.addShape('text', {
      attrs: {
        x: 0,
        y: labelY,
        textAlign: 'center',
        text: cfg.label,
        cursor: 'pointer',
        lineWidth: 1,
        // fontWeight: 400,
        ...labelStyle.style,
      },
      // must be assigned in G6 3.3 and later versions. it can be any value you want
      name: 'text-shape1',
      draggable: true,
    });

    // if(cfg.subCenter ||cfg.center){
    //     group.addShape("text", {
    //         attrs: {
    //           x: 0,
    //           y: labelY + 20,
    //           textAlign: "center",
    //           text: '关联496起',
    //           cursor: "pointer",
    //           lineWidth: 1,
    //           // fontWeight: 400,
    //           ...labelStyle.style
    //         },
    //         // must be assigned in G6 3.3 and later versions. it can be any value you want
    //         name: "text-shape1",
    //         draggable: true
    //       });
    // }
    return keyShape;
  },
  setState(name, value, node) {
    const group = node.getContainer();
    const shape = group.get('children')[0]; // 顺序根据 draw 时确定
    const iconShape = group.get('children')[1]; // icon
    const textShape = group.get('children')[2]; // text
    if (name === 'highlight') {
      if (value) {
        shape.attr('lineWidth', 2);
        iconShape.attr('lineWidth', 1);
        // textShape.attr("fontWeight", 800);
        shape.attr('opacity', 1);
        iconShape.attr('opacity', 1);
        textShape.attr('opacity', 1);
      } else {
        shape.attr('lineWidth', 1);
        iconShape.attr('lineWidth', 1);
        // textShape.attr("fontWeight", "normal");
        shape.attr('opacity', 0.1);
        iconShape.attr('opacity', 0.1);
        textShape.attr('opacity', 0.1);
      }
    }
    if (name === 'dark') {
      if (value) {
        shape.attr('lineWidth', 1);
        // textShape.attr("fontWeight", "normal");
        shape.attr('opacity', 0.1);
        iconShape.attr('opacity', 0.1);
        textShape.attr('opacity', 0.1);
      } else {
        shape.attr('lineWidth', 2);
        // textShape.attr("fontWeight", 800);
        iconShape.attr('opacity', 1);
        shape.attr('opacity', 1);
        textShape.attr('opacity', 1);
      }
    }
    if (name === '_selected') {
      if (value) {
        shape.attr('shadowColor', 'rgba(18, 150, 231,.6)');
        shape.attr('shadowBlur', 20);
        shape.attr('fill', '#ccc');
      } else {
        shape.attr('shadowColor', '');
        shape.attr('shadowBlur', 0);
        shape.attr('fill', '#fff');
      }
    }
    // console.log(textShape)
  },
});
const lineDash = [4, 2, 1, 2];
G6.registerEdge(
  'can-running',
  {
    setState(name, value, item) {
      const shape = item.get('keyShape');

      if (name === 'running') {
        if (value) {
          shape.attr('stroke', '#f7bd32');
          let index = 0;
          shape.animate(
            () => {
              index++;
              if (index > 9) {
                index = 0;
              }
              const res = {
                lineDash,
                lineDashOffset: -index,
              };
              // return the params for this frame
              return res;
            },
            {
              repeat: true,
              duration: 3000,
            },
          );
        } else {
          shape.stopAnimate();
          shape.attr('lineDash', null);
          shape.attr('stroke', '#3ba1ff');
        }
      } else {
        // shape.attr("stroke", '#3ba1ff');
      }
    },
  },
  'line',
);

// The symbols for the marker inside the combo
const collapseIcon = (x, y, r) => {
  return [
    ['M', x - r, y],
    ['a', r, r, 0, 1, 0, r * 2, 0],
    ['a', r, r, 0, 1, 0, -r * 2, 0],
    ['M', x - r + 4, y],
    ['L', x - r + 2 * r - 4, y],
  ];
};
const expandIcon = (x, y, r) => {
  return [
    ['M', x - r, y],
    ['a', r, r, 0, 1, 0, r * 2, 0],
    ['a', r, r, 0, 1, 0, -r * 2, 0],
    ['M', x - r + 4, y],
    ['L', x - r + 2 * r - 4, y],
    ['M', x - r + r, y - r + 4],
    ['L', x, y + r - 4],
  ];
};
G6.registerCombo(
  'cCircle',
  {
    drawShape: function draw(cfg, group) {
      const self = this;
      // Get the shape style, where the style.r corresponds to the R in the Illustration of Built-in Rect Combo
      const style = self.getShapeStyle(cfg);
      // Add a circle shape as keyShape which is the same as the extended 'circle' type Combo
      const circle = group.addShape('circle', {
        attrs: {
          ...style,
          x: 0,
          y: 0,
          r: style.r,
        },
        draggable: true,
        name: 'combo-keyShape',
      });
      // Add the marker on the bottom
      const marker = group.addShape('marker', {
        attrs: {
          ...style,
          fill: '#fff',
          opacity: 1,
          x: 0,
          y: style.r,
          r: 10,
          symbol: collapseIcon,
        },
        draggable: true,
        name: 'combo-marker-shape',
      });

      return circle;
    },
    // Define the updating logic for the marker
    afterUpdate: function afterUpdate(cfg, combo) {
      const self = this;
      // Get the shape style, where the style.r corresponds to the R in the Illustration of Built-in Rect Combo
      const style = self.getShapeStyle(cfg);
      const group = combo.get('group');
      // Find the marker shape in the graphics group of the Combo
      const marker = group.find(ele => ele.get('name') === 'combo-marker-shape');
      // Update the marker shape
      marker.attr({
        x: 0,
        y: style.r,
        // The property 'collapsed' in the combo data represents the collapsing state of the Combo
        // Update the symbol according to 'collapsed'
        symbol: cfg.collapsed ? expandIcon : collapseIcon,
      });
    },
  },
  'circle',
);

G6.registerNode('domNode', {
  draw(cfg, group) {
    //   console.log('cfg=',cfg)
    const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle, iconfontColor } = cfg;

    if (backgroundStyle) {
      group.addShape('circle', {
        attrs: {
          x: 0,
          y: 0,
          r: cfg.size,
          ...backgroundStyle,
          lineWidth: 2,
          fontWeight: 800,
          cursor: 'pointer',
          ...style,
        },
        // must be assigned in G6 3.3 and later versions. it can be any value you want
        name: 'circle-shape',
        draggable: true,
      });
    }

    const keyShape = group.addShape('text', {
      attrs: {
        x: 0,
        y: 0,
        fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
        textAlign: 'center',
        textBaseline: 'middle',
        text: cfg.text,
        fontSize: cfg.size,
        lineWidth: 1,
        // fontWeight: 200,
        cursor: 'pointer',
        stroke: iconfontColor,
      },
      // must be assigned in G6 3.3 and later versions. it can be any value you want
      name: 'text-shape1',
      draggable: true,
    });

    const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;

    group.addShape('text', {
      attrs: {
        x: 0,
        y: labelY,
        textAlign: 'center',
        text: cfg.label,
        cursor: 'pointer',
        lineWidth: 1,
        // fontWeight: 400,
        ...labelStyle.style,
      },
      // must be assigned in G6 3.3 and later versions. it can be any value you want
      name: 'text-shape1',
      draggable: true,
    });

    if (cfg.subCenter || cfg.center) {
      group.addShape('dom', {
        attrs: {
          x: 0,
          y: labelY + 50,
          width: 200,
          height: 20,
          // 传入 DOM 的 html
          html: `<div>胜多负少的方式</div>`,
        },
        name: 'text-shape1',
        draggable: true,
      });
    }
    return keyShape;
  },
  setState(name, value, node) {
    const group = node.getContainer();
    const shape = group.get('children')[0]; // 顺序根据 draw 时确定
    const iconShape = group.get('children')[1]; // icon
    const textShape = group.get('children')[2]; // text
    if (name === 'highlight') {
      if (value) {
        shape.attr('lineWidth', 2);
        iconShape.attr('lineWidth', 1);
        // textShape.attr("fontWeight", 800);
        shape.attr('opacity', 1);
        iconShape.attr('opacity', 1);
        textShape.attr('opacity', 1);
      } else {
        shape.attr('lineWidth', 1);
        iconShape.attr('lineWidth', 1);
        // textShape.attr("fontWeight", "normal");
        shape.attr('opacity', 0.1);
        iconShape.attr('opacity', 0.1);
        textShape.attr('opacity', 0.1);
      }
    }
    if (name === 'dark') {
      if (value) {
        shape.attr('lineWidth', 1);
        // textShape.attr("fontWeight", "normal");
        shape.attr('opacity', 0.1);
        iconShape.attr('opacity', 0.1);
        textShape.attr('opacity', 0.1);
      } else {
        shape.attr('lineWidth', 2);
        // textShape.attr("fontWeight", 800);
        iconShape.attr('opacity', 1);
        shape.attr('opacity', 1);
        textShape.attr('opacity', 1);
      }
    }
    if (name === '_selected') {
      if (value) {
        shape.attr('shadowColor', 'rgba(18, 150, 231,.6)');
        shape.attr('shadowBlur', 20);
        shape.attr('fill', '#ccc');
      } else {
        shape.attr('shadowColor', '');
        shape.attr('shadowBlur', 0);
        shape.attr('fill', '#fff');
      }
    }
    // console.log(textShape)
  },
});
